<template>
  <div class="home">
    <div class="home__banner">
      <el-carousel indicator-position="none" height="450px">
        <el-carousel-item v-for="(item, i) in carousel" :key="i">
          <el-image style="width: 100%" :src="item.img" fit="cover" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <section>
      <div class="home__items">
        <div class="title">
          <h3 class="title__text">商城热销</h3>
          <h3 class="title__more" @click="toList">查看更多</h3>
        </div>
        <div :class="['content', { 'content--short': goods.length < 5 }]">
          <item-card
            v-for="(g, i) in goods"
            :key="i"
            :itemId="g.id"
            :price="g.price"
            :title="g.name"
            :thumb="g.mainImgUrl"
          />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from '@vue/composition-api';
import { getProduct } from '../../api/user';
import ItemCard from '../../components/ItemCard.vue';
import { useNav } from '../../hooks';
import { RouterMap } from '../../utils/constants';

const carousel = [
  {
    title: '',
    img: 'https://zuotong.space/img/banner_1.jpg',
    link: '',
  },
  {
    title: '',
    img: 'https://zuotong.space/img/banner_2.jpg',
    link: '',
  },
  {
    title: '',
    img: 'https://zuotong.space/img/banner_3.jpg',
    link: '',
  },

];

export default defineComponent({
  components: { ItemCard },
  setup(props, context) {
    const { to } = useNav(context);
    const goods = ref([]);
    const getGoods = async () => {
      const { code, data } = await getProduct(1, 5, {isHot: 1});
      if (code === 100) {
        goods.value = data.products;
      }
    };

    onMounted(() => {
      getGoods();
    });

    return {
      carousel,
      goods,

      toList: () => {
        to(RouterMap.Goods);
      },
    };
  },
});
</script>

<style lang="less" scoped>
.home {
  &__items {
    width: 1200px;
    margin: 2rem auto;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      &__text {
        font-weight: normal;
        font-size: 1.5rem;
      }
      &__more {
        font-size: 0.8rem;
        font-weight: normal;
        cursor: pointer;
        color: #999;
        transition: color 0.3s;
        &:hover {
          color: rgb(255, 48, 48);
          transition: color 0.3s;
        }
      }
    }

    .content {
      display: flex;
      justify-content: space-between;

      &--short {
        justify-content: left;
        .item-card {
          margin-right: 1rem;
        }
      }
    }
  }
}
</style>
